<template>
  <div>
    <p class="fixed-top-helper"></p>
    <!-- 参照元素 -->
    <div class="fixed-top-reference"></div>
    <header>IntersectionObserver吸顶</header>
    <main>
      <img v-for="(image, i) in images" :key="i" :src="image" alt="" />
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574247890587&di=88d4066be3d57ac962a6bec37e265d37&imgtype=0&src=http%3A%2F%2F01.imgmini.eastday.com%2Fmobile%2F20170810%2F20170810151144_d41d8cd98f00b204e9800998ecf8427e_3.jpeg',
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4054762707,1853885380&fm=26&gp=0.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574247912077&di=508a949e5e291875debf6ca844292cd4&imgtype=0&src=http%3A%2F%2F03imgmini.eastday.com%2Fmobile%2F20180827%2F20180827095359_6759372e9bd28026ee6f53b500fb4291_2.jpeg'
      ]
    };
  },
  mounted() {
    const header = document.querySelector('header');
    const fixedTopReference = document.querySelector('.fixed-top-reference');
    // 当给header增加fixed定位时，header脱离了文档流，自然参考元素会往下掉，然后往下掉又发生了交叉，从而去除fixed定位，陷入一个死循环;思考了一会，解决办法是，让参考元素绝对定位至header的上方：
    fixedTopReference.style.top = `${header.offsetTop}px`;

    // 目标元素是否进入或者离开了指定父元素的内部
    // new IntersectionObserver(callback, options);
    const observerFixedTop = new IntersectionObserver(entries => {
      entries.forEach(item => {
        console.log('IntersectionObserver', item);
        // boundingClientRect 目标元素的矩形信息
        // intersectionRatio 相交区域和目标元素的比例值 intersectionRect/boundingClientRect 不可见时小于等于0 完全可见时为1，完全不可见时小于等于0
        // intersectionRect 目标元素和视窗（根）相交的矩形信息 可以称为相交区域
        // isIntersecting 目标元素当前是否可见 Boolean值 可见为true
        // isVisible
        // rootBounds 根元素的矩形信息，没有指定根元素就是当前视窗的矩形信息
        // target 观察的目标元素
        // time 返回一个记录从IntersectionObserver的时间到交叉被触发的时间的时间戳
        if (item.boundingClientRect.top < 0) {
          header.classList.add('fixed');
        } else {
          header.classList.remove('fixed');
        }
      });
    });
    observerFixedTop.observe(fixedTopReference);
  }
};
</script>

<style lang="scss" scoped>
.fixed-top-helper {
  height: 100px;
  background: #ccc;
}
header {
  background: #ccc;
  padding: 15px 0;
  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}
main {
  img {
    display: block;
    height: 500px;
    margin: 30px;
  }
}
</style>
